import styled from 'styled-components'

interface IProps {
  $asideWidth: number
}

export const LeftContentWrapper = styled.div<IProps>`
  height: 100vh;
  width: ${(props) => props.$asideWidth}px;
  display: flex;
  flex-direction: column;
  transition: all 0.1s ease-in-out;
  background-color: var(--bgColorTop);
`
export const LeftHeaderWrapper = styled.div`
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
`

export const LeftContentContentWrapper = styled.div`
  flex: 1;
  display: flex;
`

export const LeftFooterWrapper = styled.div`
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 -1px 0 0 var(--bgColorOther, #f4f4f5);
`
